<template>
  <div class="app-container">
    <div class="search-container">
      <el-form-item label="" style="margin-left: 10px">
        <el-radio-group v-model="params.state" @change="stateRadioChange">
          <el-radio name="type" :value="1">待检测</el-radio>
          <el-radio name="type" :value="2">已检测</el-radio>
        </el-radio-group>
      </el-form-item>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="feedbackId" label="编号" />
        <el-table-column sortable prop="fdatetime" label="反馈时间">
          <template #default="scope">
            {{ formatDateTime(new Date(scope.row.fdatetime)) }}
          </template>
        </el-table-column>
        <el-table-column sortable prop="verify.verDatetime" label="确认时间">
          <template #default="scope">
            {{
              scope.row.verify.verDatetime
                ? formatDateTime(new Date(scope.row.verify.verDatetime))
                : "暂无"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="province.pname" label="省份" />
        <el-table-column prop="city.cityName" label="城市" />
        <el-table-column label="照片">
          <template #default="scope">
            <el-image
              style="
                width: 100px;
                height: 100px;
                background-color: #fff;
                z-index: 9999;
              "
              :src="
                baseUrl + '/grid-api/file/imgId/' + scope.row.fileUploadImgId
              "
            />
          </template>
        </el-table-column>
        <el-table-column label="预估AQI">
          <template #default="scope">
            <el-button type="success" plain v-if="scope.row.aqi.aqiId == 1"
              >一</el-button
            >
            <el-button
              type="success"
              color="#baae00"
              plain
              v-if="scope.row.aqi.aqiId == 2"
              >二</el-button
            >
            <el-button
              type="success"
              color="#ffb000"
              plain
              v-if="scope.row.aqi.aqiId == 3"
              >三</el-button
            >
            <el-button
              type="success"
              color="#ff4600"
              plain
              v-if="scope.row.aqi.aqiId == 4"
              >四</el-button
            >
            <el-button
              type="success"
              color="#006bff"
              plain
              v-if="scope.row.aqi.aqiId == 5"
              >五</el-button
            >
            <el-button
              type="success"
              color="#b000ff"
              plain
              v-if="scope.row.aqi.aqiId == 6"
              >六</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="确认AQI">
          <template #default="scope">
            <div v-if="scope.row.verify.aqiVerId">
              <el-button
                type="success"
                plain
                v-if="scope.row.verify.aqiVerId == 1"
                >一</el-button
              >
              <el-button
                type="success"
                color="#baae00"
                plain
                v-if="scope.row.verify.aqiVerId == 2"
                >二</el-button
              >
              <el-button
                type="success"
                color="#ffb000"
                plain
                v-if="scope.row.verify.aqiVerId == 3"
                >三</el-button
              >
              <el-button
                type="success"
                color="#ff4600"
                plain
                v-if="scope.row.verify.aqiVerId == 4"
                >四</el-button
              >
              <el-button
                type="success"
                color="#006bff"
                plain
                v-if="scope.row.verify.aqiVerId == 5"
                >五</el-button
              >
              <el-button
                type="success"
                color="#b000ff"
                plain
                v-if="scope.row.verify.aqiVerId == 6"
                >六</el-button
              >
            </div>
            <div v-else>暂无</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              v-if="scope.row.state == 1"
              @click="verify(scope.row)"
            >
              去检测
            </el-button>
            <el-button
              link
              type="primary"
              size="small"
              @click="viewDetails(scope.row)"
            >
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        background
        layout="prev, pager, next"
        :total="pageRes.totalRow"
        :page-size="params.pageSize"
        @current-change="pageChange"
      />
    </el-card>
    <el-dialog v-model="verifyDialogFormVisible" title="检测提交" width="800">
      <el-descriptions title="" :column="3" border>
        <el-descriptions-item label="反馈用户">
          {{ curRow.supervisor.sname }}
        </el-descriptions-item>
        <el-descriptions-item label="省份">{{
          curRow.province.pname
        }}</el-descriptions-item>
        <el-descriptions-item label="城市">{{
          curRow.city.cityName
        }}</el-descriptions-item>
        <el-descriptions-item label="详细地址">{{
          curRow.faddress
        }}</el-descriptions-item>
        <el-descriptions-item label="AQI等级">{{
          curRow.aqi.aqiLevel
        }}</el-descriptions-item>
        <el-descriptions-item label="描述">
          <el-tag size="small">{{ curRow.finfo }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="时间">
          {{ formatDateTime(new Date(curRow.fdatetime)) }}
        </el-descriptions-item>
      </el-descriptions>
      <el-form
        :model="form"
        label-width="auto"
        style="max-width: 400px; margin-top: 20px"
      >
        <el-form-item label="SO2浓度">
          <div style="display: flex; height: 30px">
            <el-input
              type="number"
              :min="0"
              v-model="form.so2"
              placeholder="请输入SO2浓度"
            />
            <div style="width: 70px; margin-left: 5px">ug/m3</div>
            <div
              v-if="form.so2 >= 0 && form.so2 <= 50"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: green;
                color: #fff;
              "
            >
              一 <span style="display: none">{{ (aqiLevel.so = 1) }}</span>
            </div>
            <div
              v-else-if="form.so2 >= 51 && form.so2 <= 150"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: yellow;
              "
            >
              二 <span style="display: none">{{ (aqiLevel.so = 2) }}</span>
            </div>
            <div
              v-else-if="form.so2 >= 151 && form.so2 <= 475"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: orange;
                color: #fff;
              "
            >
              三 <span style="display: none">{{ (aqiLevel.so = 3) }}</span>
            </div>
            <div
              v-else-if="form.so2 >= 476 && form.so2 <= 800"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: red;
                color: #fff;
              "
            >
              四 <span style="display: none">{{ (aqiLevel.so = 4) }}</span>
            </div>
            <div
              v-else-if="form.so2 >= 801 && form.so2 <= 1600"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: palevioletred;
                color: #fff;
              "
            >
              五 <span style="display: none">{{ (aqiLevel.so = 5) }}</span>
            </div>
            <div
              v-else-if="form.so2 > 1600"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: purple;
                color: #fff;
              "
            >
              六 <span style="display: none">{{ (aqiLevel.so = 6) }}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="CO浓度">
          <div style="display: flex; height: 30px">
            <el-input
              type="number"
              :min="0"
              v-model="form.co"
              placeholder="请输入CO浓度"
            />
            <div style="width: 70px; margin-left: 5px">ug/m3</div>
            <div
              v-if="form.co >= 0 && form.co <= 2000"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: green;
                color: #fff;
              "
            >
              一 <span style="display: none">{{ (aqiLevel.co = 1) }}</span>
            </div>
            <div
              v-else-if="form.co >= 2001 && form.co <= 4000"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: yellow;
              "
            >
              二 <span style="display: none">{{ (aqiLevel.co = 2) }}</span>
            </div>
            <div
              v-else-if="form.co >= 4001 && form.co <= 14000"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: orange;
                color: #fff;
              "
            >
              三 <span style="display: none">{{ (aqiLevel.co = 3) }}</span>
            </div>
            <div
              v-else-if="form.co >= 14001 && form.co <= 24000"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: red;
                color: #fff;
              "
            >
              四 <span style="display: none">{{ (aqiLevel.co = 4) }}</span>
            </div>
            <div
              v-else-if="form.co >= 24001 && form.co <= 36000"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: palevioletred;
                color: #fff;
              "
            >
              五 <span style="display: none">{{ (aqiLevel.co = 5) }}</span>
            </div>
            <div
              v-else-if="form.co > 36000"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: purple;
                color: #fff;
              "
            >
              六 <span style="display: none">{{ (aqiLevel.co = 6) }}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="PM2.5">
          <div style="display: flex; height: 30px">
            <el-input
              type="number"
              :min="0"
              v-model="form.pm"
              placeholder="请输入PM2.5浓度"
            />
            <div style="width: 70px; margin-left: 5px">ug/m3</div>
            <div
              v-if="form.pm >= 0 && form.pm <= 35"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: green;
                color: #fff;
              "
            >
              一 <span style="display: none">{{ (aqiLevel.pm = 1) }}</span>
            </div>
            <div
              v-else-if="form.pm >= 36 && form.pm <= 75"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: yellow;
              "
            >
              二 <span style="display: none">{{ (aqiLevel.pm = 2) }}</span>
            </div>
            <div
              v-else-if="form.pm >= 76 && form.pm <= 115"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: orange;
                color: #fff;
              "
            >
              三 <span style="display: none">{{ (aqiLevel.pm = 3) }}</span>
            </div>
            <div
              v-else-if="form.pm >= 116 && form.pm <= 150"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: red;
                color: #fff;
              "
            >
              四 <span style="display: none">{{ (aqiLevel.pm = 4) }}</span>
            </div>
            <div
              v-else-if="form.pm >= 151 && form.pm <= 250"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: palevioletred;
                color: #fff;
              "
            >
              五 <span style="display: none">{{ (aqiLevel.pm = 5) }}</span>
            </div>
            <div
              v-else-if="form.pm > 250"
              style="
                margin-left: 10px;
                line-height: 30px;
                text-align: center;
                width: 40px;
                height: 30px;
                background-color: purple;
                color: #fff;
              "
            >
              六 <span style="display: none">{{ (aqiLevel.pm = 6) }}</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="确认AQI等级">
          <span style="display: none">{{
            (aqiLevel.aqi = Math.max(aqiLevel.so, aqiLevel.co, aqiLevel.pm))
          }}</span>
          <span
            v-if="aqiLevel.aqi == 1"
            style="
              width: 30px;
              height: 30px;
              background-color: green;
              text-align: center;
              color: #fff;
            "
            >一</span
          >
          <span style="margin-left: 10px" v-if="aqiLevel.aqi == 1"
            >AQI实测一级 优</span
          >
          <span
            v-if="aqiLevel.aqi == 2"
            style="
              width: 30px;
              height: 30px;
              background-color: yellow;
              text-align: center;
            "
            >二</span
          >
          <span style="margin-left: 10px" v-if="aqiLevel.aqi == 2"
            >AQI实测二级 良</span
          >
          <span
            v-if="aqiLevel.aqi == 3"
            style="
              width: 30px;
              height: 30px;
              background-color: orange;
              text-align: center;
              color: #fff;
            "
            >三</span
          >
          <span style="margin-left: 10px" v-if="aqiLevel.aqi == 3"
            >AQI实测三级 轻度污染</span
          >
          <span
            v-if="aqiLevel.aqi == 4"
            style="
              width: 30px;
              height: 30px;
              background-color: red;
              text-align: center;
              color: #fff;
            "
            >四</span
          >
          <span style="margin-left: 10px" v-if="aqiLevel.aqi == 4"
            >AQI实测四级 中度污染</span
          >
          <span
            v-if="aqiLevel.aqi == 5"
            style="
              width: 30px;
              height: 30px;
              background-color: palevioletred;
              text-align: center;
              color: #fff;
            "
            >五</span
          >
          <span style="margin-left: 10px" v-if="aqiLevel.aqi == 5"
            >AQI实测五级 重度污染</span
          >
          <span
            v-if="aqiLevel.aqi == 6"
            style="
              width: 30px;
              height: 30px;
              background-color: purple;
              text-align: center;
              color: #fff;
            "
            >六</span
          >
          <span style="margin-left: 10px" v-if="aqiLevel.aqi == 6"
            >AQI实测六级 严重污染</span
          >
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="verifyDialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="submitVerify()"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="viewDetailsDialogFormVisible"
      title="详情查看"
      width="800"
    >
      <el-descriptions title="" :column="2" border>
        <el-descriptions-item label="状态">
          <div v-if="curRow.state == 0">已提交</div>
          <div v-if="curRow.state == 1">已指派</div>
          <div v-if="curRow.state == 2">已确认</div>
        </el-descriptions-item>
        <el-descriptions-item label="省份">{{
          curRow.province.pname
        }}</el-descriptions-item>
        <el-descriptions-item label="城市">{{
          curRow.city.cityName
        }}</el-descriptions-item>
        <el-descriptions-item label="详细地址">{{
          curRow.faddress
        }}</el-descriptions-item>
        <el-descriptions-item label="监督员姓名">{{
          curRow.supervisor.sname
        }}</el-descriptions-item>
        <el-descriptions-item label="监督员电话">{{
          curRow.supervisor.sphone
        }}</el-descriptions-item>
        <el-descriptions-item v-if="curRow.grid.gname" label="网格员姓名">{{
          curRow.grid.gname
        }}</el-descriptions-item>
        <el-descriptions-item v-if="curRow.grid.gphone" label="网格员电话">{{
          curRow.grid.gphone
        }}</el-descriptions-item>
        <el-descriptions-item label="预估AQI等级">
          <el-button type="success" plain v-if="curRow.aqi.aqiId == 1"
            >优（一）</el-button
          >
          <el-button
            type="success"
            color="#baae00"
            plain
            v-if="curRow.aqi.aqiId == 2"
            >良（二）</el-button
          >
          <el-button
            type="success"
            color="#ffb000"
            plain
            v-if="curRow.aqi.aqiId == 3"
            >轻度污染（三）</el-button
          >
          <el-button
            type="success"
            color="#ff4600"
            plain
            v-if="curRow.aqi.aqiId == 4"
            >中度污染（四）</el-button
          >
          <el-button
            type="success"
            color="#006bff"
            plain
            v-if="curRow.aqi.aqiId == 5"
            >重度污染（五）</el-button
          >
          <el-button
            type="success"
            color="#b000ff"
            plain
            v-if="curRow.aqi.aqiId == 6"
            >严重污染（六）</el-button
          >
        </el-descriptions-item>
        <el-descriptions-item v-if="curRow.verify.aqiVerId" label="确认等级">
          <el-button type="success" plain v-if="curRow.verify.aqiVerId == 1"
            >优（一）</el-button
          >
          <el-button
            type="success"
            color="#baae00"
            plain
            v-if="curRow.verify.aqiVerId == 2"
            >良（二）</el-button
          >
          <el-button
            type="success"
            color="#ffb000"
            plain
            v-if="curRow.verify.aqiVerId == 3"
            >轻度污染（三）</el-button
          >
          <el-button
            type="success"
            color="#ff4600"
            plain
            v-if="curRow.verify.aqiVerId == 4"
            >中度污染（四）</el-button
          >
          <el-button
            type="success"
            color="#006bff"
            plain
            v-if="curRow.verify.aqiVerId == 5"
            >重度污染（五）</el-button
          >
          <el-button
            type="success"
            color="#b000ff"
            plain
            v-if="curRow.verify.aqiVerId == 6"
            >严重污染（六）</el-button
          >
        </el-descriptions-item>
        <el-descriptions-item label="反馈时间">
          {{ formatDateTime(new Date(curRow.fdatetime)) }}
        </el-descriptions-item>
        <el-descriptions-item v-if="curRow.verify.verDatetime" label="确认时间">
          {{ formatDateTime(new Date(curRow.verify.verDatetime)) }}
        </el-descriptions-item>
        <el-descriptions-item v-if="curRow.verify.so2" label="SO2浓度">
          {{ curRow.verify.so2 }} ug/m3
        </el-descriptions-item>
        <el-descriptions-item v-if="curRow.verify.co" label="CO浓度">
          {{ curRow.verify.co }} ug/m3
        </el-descriptions-item>
        <el-descriptions-item v-if="curRow.verify.pm" label="PM2.5浓度">
          {{ curRow.verify.pm }} ug/m3
        </el-descriptions-item>
        <el-descriptions-item label="AQI描述">
          <el-tag size="small">{{ curRow.aqi.aqiDesc }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="图片">
          <el-image
            style="
              width: 100px;
              height: 100px;
              background-color: #fff;
              z-index: 9999;
            "
            :src="baseUrl + '/grid-api/file/imgId/' + curRow.fileUploadImgId"
            :preview-src-list="[
              baseUrl + '/grid-api/file/imgId/' + curRow.fileUploadImgId,
            ]"
          />
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            type="primary"
            @click="viewDetailsDialogFormVisible = false"
          >
            返回
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import FeedbackAPI from "@/api/feedback";
import DistrictAPI from "@/api/district";
import { ElMessage } from "element-plus";

const params: any = ref({
  aqiPreId: null,
  beginNum: 0,
  fcity: null,
  fdatetime: null,
  fprovince: null,
  pageNum: 1,
  pageSize: 4,
  state: 1,
});

const form: any = reactive({
  feedbackId: "",
  aqiVerId: "",
  so2: "",
  co: "",
  pm: "",
});

const aqiLevel: any = reactive({
  so: 1,
  co: 1,
  pm: 1,
  aqi: 1,
});

const baseUrl = import.meta.env.VITE_APP_BASE_API;

const provinceList: any = ref([]);

const cityList: any = ref([]);

const verifyDialogFormVisible = ref(false);

const viewDetailsDialogFormVisible = ref(false);

const curRow: any = ref({});

const pageRes = ref({
  totalPage: 0,
  totalRow: 0,
});

const tableData: any = ref([]);

function reqFeedbackList() {
  FeedbackAPI.feedbackList(params.value).then((res) => {
    console.log(res);
    tableData.value = [];
    pageRes.value.totalPage = res.totalPage;
    pageRes.value.totalRow = res.totalRow;
    if (res.feedbackList == null) return;
    let i = 1;
    for (const v of res.feedbackList) {
      v.order = i++;
      tableData.value.push(v);
    }
  });
}

function pageChange(v: any) {
  console.log(v);
  console.log();
  params.value.pageNum = v;
  reqFeedbackList();
}

function pad(num: any) {
  return num.toString().padStart(2, "0");
}

function formatDateTime(date: any) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  return `${year}-${pad(month)}-${pad(day)} ${pad(hour)}:${pad(minute)}:${pad(second)}`;
}

function formatDate(date: any) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  return `${year}-${pad(month)}-${pad(day)}`;
}

function formatTime(date: any) {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const hour = date.getHours();
  const minute = date.getMinutes();
  const second = date.getSeconds();
  return `${pad(hour)}:${pad(minute)}:${pad(second)}`;
}

function verify(row: any) {
  curRow.value = row;
  console.log(curRow.value);
  verifyDialogFormVisible.value = true;
}

onMounted(() => {
  reqFeedbackList();
});

function reqProvinceList() {
  DistrictAPI.provinceList().then((res) => {
    for (const v of res) {
      provinceList.value.push(v);
    }
  });
}

function reqCityList() {
  DistrictAPI.cityList(form.province).then((res) => {
    for (const v of res) {
      cityList.value.push(v);
    }
  });
}

function submitVerify() {
  form.feedbackId = curRow.value.feedbackId;
  form.aqiVerId = aqiLevel.aqi;
  if (form.so2 == "") {
    ElMessage({
      showClose: true,
      message: "请输入SO2浓度",
      type: "warning",
    });
    return;
  }
  if (parseInt(form.so2) < 0) {
    ElMessage({
      showClose: true,
      message: "SO2浓度不能为负值",
      type: "warning",
    });
    return;
  }
  if (form.co == "") {
    ElMessage({
      showClose: true,
      message: "请输入CO浓度",
      type: "warning",
    });
    return;
  }
  if (parseInt(form.co) < 0) {
    ElMessage({
      showClose: true,
      message: "CO浓度不能为负值",
      type: "warning",
    });
    return;
  }
  if (form.pm == "") {
    ElMessage({
      showClose: true,
      message: "请输入PM2.5浓度",
      type: "warning",
    });
    return;
  }
  if (parseInt(form.pm) < 0) {
    ElMessage({
      showClose: true,
      message: "PM浓度不能为负值",
      type: "warning",
    });
    return;
  }
  FeedbackAPI.submitVerify(form).then((res) => {
    console.log(res);
    verifyDialogFormVisible.value = false;
    reqFeedbackList();
    form.feedbackId = "";
    form.so2 = "";
    form.co = "";
    form.pm = "";
    aqiLevel.so = 1;
    aqiLevel.co = 1;
    aqiLevel.pm = 1;
    aqiLevel.aqi = 1;
    ElMessage({
      showClose: true,
      message: "提交成功",
      type: "success",
    });
  });
}

function provinceChange(v: any) {
  console.log(v);
  console.log(form.province);
  cityList.value = [];
  form.city = "";
  reqCityList();
}

function viewDetails(row: any) {
  curRow.value = row;
  viewDetailsDialogFormVisible.value = true;
}

function stateRadioChange(v: any) {
  console.log(v);
  reqFeedbackList();
}
</script>
